<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button class="add">添加</button>
    <button style="display: none;" class="edit" onclick="editfun()">修改</button>
    <ul>
        <li>哈哈哈哈<span> X</span></li>
    </ul>
    <script>
        // 获取相关元素
        let input = document.querySelector('input')
        let add = document.querySelector('.add')
        let edit = document.querySelector('.edit')
        let ul = document.querySelector('ul')
        let li = document.getElementsByTagName('li')

        // 给按钮添加点击事件
        add.onclick = function(){
            // 获取输入框的内容
            let val = input.value.trim()
            // 去掉前后的空格
            // console.log(val.trim()); 
            // 前置验证
            if(!val) return alert('不能为空')
            // console.log(val);
            // 创建li
            let newli = document.createElement('li')
            // 给li写入内容
            newli.innerHTML = `<span>${val}</span><span>X</span>`
            // 添加点击事件
            newli.onclick = edittext
            newli.children[1].onclick = deltext
            // 设置自定义属性将index传进去
            newli.setAttribute('data-index',ul.children.length)
            // 将新的li插入到ul
             ul.appendChild(newli)
            // 清空输入框的内容
            input.value = ''
           
        }
        // 删除方法
        function deltext(e){
           this.parentNode.remove()
            // 阻止冒泡
            e.stopPropagation()
            
        }
        let editindex = 0
        // 修改文字
        function edittext(params) {
            console.log(this);
            // 回显数据
            input.value = this.children[0].innerHTML
            // 隐藏添加按钮显示修改按钮
            add.style.display= 'none'
            edit.style.display= 'inline-block'   
            // 获取绑定的自定义属性index
            editindex = this.getAttribute('data-index')||0
            console.log(editindex);
            
        }

        // 点击修改按钮
        function editfun(){
            let val = input.value.trim()
            // 根据下标修改内容
            console.log(editindex);
            // 根据下标修改内容
            ul.children[editindex].children[0].innerHTML = val
            input.value = ''
             // 隐藏添加按钮显示修改按钮
             edit.style.display= 'none'
             add.style.display= 'inline-block'  
            

        }
        
      
      
    </script>
</body>
</html>